<template>
  <div>
    <div class="region">
      <ul>
      <li class="childe">地区</li>
      <li>全部</li>
      <li>内地</li>
      <li>港台</li>
      <li>欧美</li>
      <li>日本</li>
      <li>韩国</li>
    </ul>
    <br>
    <br>
    <ul>
      <li class="childe">类型</li>
      <li>全部</li>
      <li>官方版</li>
      <li>原声</li>
      <li>现场版</li>
      <li>网易出品</li>
    </ul>
    <br>
    <br>
    <ul>
      <li class="childe">排序</li>
      <li>上升最快</li>
      <li>最热</li>
      <li>最新</li>
    </ul>
    </div>
    <div class="video">
      <ul>
        <li>
          <p><video src=""></video></p>
          <p><span>许嵩</span></p>
          <p><span>认错</span></p>
        </li>
        <li>
          <p><video src=""></video></p>
          <p><span>许嵩</span></p>
          <p><span>认错</span></p>
        </li>
        <li>
          <p><video src=""></video></p>
          <p><span>许嵩</span></p>
          <p><span>认错</span></p>
        </li>
        <li>
          <p><video src=""></video></p>
          <p><span>许嵩</span></p>
          <p><span>认错</span></p>
        </li>
        <li>
          <p><video src=""></video></p>
          <p><span>许嵩</span></p>
          <p><span>认错</span></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.region{
  width: 80%;
  padding-left:10%;
}
.region ul li{
  float:left;
  margin-right:5%;
}
.childe{
  font-weight:bold;
}
.region ul:nth-child(1){
 margin-top:5%;
}
.video{
  width: 80%;
  clear:both;
}
.video ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left:10%;
}
.video ul li {
  text-align: center;
  width: 20%;
}
.video video{
  width: 25%;
  height: 200px;
}
</style>